<script setup lang="ts">
import { ref, onBeforeMount, inject } from 'vue'
import { useStore } from '../../stores'
import { getComments } from '../../utils/api'
import { Comment, PageInfo, popMessage, popMessageKey } from '../../types/type'
import { useRouter } from 'vue-router'
import CommonPagenation from '@components/Common/CommonPagenation.vue'

/**
 * 传参示例
 * <CommentList :by-likes="false" :type-id="props.postId" :type="ref('p')" />
 */
const popMessage = inject(popMessageKey) as popMessage

const store = useStore()
const router = useRouter()
const props = defineProps(['byLikes', 'typeId', 'type', 'showPagenation'])

// 当前页码
const currentPage = ref(1)
// 每页数量
const pageSize = ref(10)
// 获取 BASEURL
const BASEURL = store.getBaseUrl()
// const commentList = ref([]) as Ref<Comment[]>
const commentList = ref<PageInfo<Comment>>()


// 获取评论
const getCommentList = (typeId: string, type: string) => {
    getComments(typeId, type, currentPage.value, pageSize.value, props.byLikes)
        .then((res) => {
            if (res.data.code === 1) {
                // newCommentList.value.push(...res.data.data.list)
                commentList.value = res.data.data
            }
        })
}

onBeforeMount(() => {
    getCommentList(props.typeId, props.type.value)
})

const lastPage = () => {
    if (commentList.value === undefined) return
    if (commentList.value.hasPreviousPage) {
        currentPage.value--
        getCommentList(props.typeId, props.type.value)
    } else {
        popMessage('已经是第一页了喵~', 'info')
    }
}
const changePage = (page: number | 'next' | 'last') => {
    switch (page) {
        case 'next':
            nextPage()
            break
        case 'last':
            lastPage()
            break
        default:
            currentPage.value = page
            getCommentList(props.typeId, props.type.value)
            break
    }
}
const nextPage = () => {
    if (commentList.value === undefined) return
    if (commentList.value.hasNextPage) {
        currentPage.value++
        getCommentList(props.typeId, props.type.value)
    } else {
        popMessage('已经是最后一页了喵~', 'info')
    }

}




</script>

<template>
    <div class="itm" v-for="comment in commentList?.list">
        <a class="head">
            <img @click="router.push('/personCenter/' + comment.userId + '/false')" class="avatar"
                :src="BASEURL + '/static/image/' + comment.avatar">
        </a>
        <div class="itm-warp">
            <div class="itm-cnt">
                <a @click="router.push('/personCenter/' + comment.userId + '/false')" style="cursor: pointer;">{{
                    comment.name }}</a>
                :
                {{ comment.content }}
            </div>
            <div class="itm-social">
                <div class="time">{{
                    comment.createTime[0] + '年' +
                    comment.createTime[1] + '月' +
                    comment.createTime[2] + '日 ' +
                    comment.createTime[3] + ':' +
                    (comment.createTime[4] < 10 ? '0' + comment.createTime[4] : comment.createTime[4]) }}</div>
                        <a class="likes">
                            <svg t="1701509500734" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2871" width="17px" height="17px">
                                <path
                                    d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                                    fill="#0C73C2" p-id="2872"></path>
                            </svg>
                            &nbsp;({{ comment.likes }})
                        </a>
                </div>
            </div>

        </div>
        <CommonPagenation v-if="commentList !== undefined && props.showPagenation" :page-info="commentList" :change-page="changePage"
            :current-page="currentPage" />
</template>

<style lang="css" scoped>
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.itm {
    padding: 15px 0;
    display: flex;
    border-bottom: 1px solid #CFCFCF;
}

.itm .head {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.head .avatar {
    cursor: pointer;
}

.itm .itm-warp {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 12px;
}

.itm a img {
    width: 30px;
    height: 30px;
}

.itm-warp .itm-cnt {

    color: #333;
}

.itm-cnt a {
    color: #0C73C2
}

.itm-warp .itm-social {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

.itm-warp .itm-social .time {
    color: #999;
}

.itm-social .likes {
    display: flex;
    cursor: pointer;
}
</style>
